<template>
	<!-- box-info -->
	<div class="box {{_theme}}">
		<div class="box-header with-border">
			<h3 class="box-title">{{title}}
           <small v-if="subtitle">{{subtitle}}</small>
      </h3>
			<div class="box-tools">
				<slot name="tools"></slot>
			</div>
		</div>
		<!-- /.box-header -->
		<div class="box-body">
			<slot>
			</slot>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: String
			},
			subtitle: {
				type: String
			},
			theme: {
				type: String,
				default: ''
			}
		},
		computed: {
			_theme() {
				let style = ""
				if (this.theme) {
					style = "box-" + this.theme;
				}
				return style;
			}
		}
	}
</script>